<template>
  <page-frame>
    <div class="order-management">
      <div class="toptitle">
        <div class="left">团队管理</div>
        <div class="right">
          <div class="btns">
            <el-button  @click="addTeam" class="lightGreenBtn">新增团队</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-content">
        <div class="input">
          <el-row>
            <el-col style="width:130px">
              <div class="input-item">
                <el-select style="width:90%!important;"  v-model="serviceId"  clearable placeholder="请选择服务" @clear = "clearItem" @change="initQueryData">
                  <el-option
                    v-for="item in serviceList"
                    :label="item.serviceName"
                    :value="item.serviceId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item" v-show="serviceId==1">
                <el-input
                  v-model="queryData.tmName"
                  style="width:81%!important"
                  placeholder="请填写团队名称"
                  @keyup.enter.native="query"
                >
                </el-input>
              </div>
              <div class="input-item" v-show="serviceId==2">
                <el-input
                  v-model="queryData.dutyPerson"
                  style="width:81%!important"
                  placeholder="请填写负责人姓名"
                  @keyup.enter.native="query"
                >
                </el-input>
              </div>
            </el-col>
            <el-col :span="6">
                <el-button class="query lightGreenBtn" @click="query">搜索</el-button>
            </el-col>
          </el-row>
        </div>
          <div class="tabs">
            <el-table
              :data="tableData"
              border
              highlight-current-row
              @row-dblclick="handleCurrentChange"
              style="width: 100%">
              <el-table-column
                prop="tmName"
                label="团队名称"
              >
              </el-table-column>
              <el-table-column
                prop="tmTypeName"
                label="服务类型"
              >
              </el-table-column>
              <el-table-column
                prop="dutyPerson"
                label="负责人"
              >
              </el-table-column>
              <el-table-column
                prop="tmMemberNumber"
                label="组员人数"
              >
              </el-table-column>
              <el-table-column
                prop="bedNumber"
                label="负责床位数"
              >
              </el-table-column>
              <el-table-column
                prop="memberNumber"
                label="负责会员人数"
              >
              </el-table-column>
              <!--<el-table-column-->
                <!--prop="tmDescription"-->
                <!--label="工作描述"-->
              <!--&gt;-->
              <!--</el-table-column>-->
              <el-table-column
                prop="operating"
                label="操作"
                width="160"
              >
                <template scope="scope">
                  <el-button type="text" size="small" @click.stop="memberEdit(scope.row)">编辑</el-button>
                  <el-button @click.stop="handleDelete(scope.row.tmId)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChangePage"
                  :current-page="currentPage"
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
    </div>
  </page-frame>
</template>


<script>
  import teamApi from '../../service/corporation/teamApi';
  export default {
    methods: {
      init(){
        this.loadTableData();
      },
      /**
       * 搜索
       */
      query(){
        this.loadTableData();
      },
      /**
       * 新增团队
       */
      addTeam(){
        this.$router.push({name:"addTeamMember",params:{way:1,teamId:0,teamNumber:-1}});
      },
      /**
       * 加载表格数据
       */
      loadTableData(){
        let self = this;
        teamApi.listAllTeam(10,self.currentPage,self.queryData).then(function(response){
          self.tableData = response.body.data.list;
          if(!response.data.data.total){
            self.total = 1;
          }else{
            self.total = response.body.data.total;
          }
        },function () {})
      },
      /**
       * 清空选择项
       */
      initQueryData(){
        this.queryData.dutyPerson = null;
        this.queryData.tmName = null;
      },
      /**
       * 清空按钮触发
       */
      clearItem(){
        this.selectItem();
      },
      /**
       * 编辑
       */
      memberEdit(row){
        this.$router.push({name:"addTeamMember",params:{way:2,teamId:row.tmId,teamNumber:row.tmMemberNumber}});
      },
      /**
       * 删除
       */
      handleDelete(tmId){
        let self = this;
        self.$confirm('确定删除该团队及关联信息', '删除团队', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          teamApi.deleteTeam(tmId).then(function(){
            self.$message({
              type: 'success',
              message: '删除成功!'
            });
            self.loadTableData();
          },function(){});
      }).catch(() => {
          self.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      },
      /**
       * 分页相关函数
       */
      handleCurrentChange(val) {
        this.$router.push({name:"teamInfo",params:{way:0,teamId:val.tmId,teamNumber:val.tmMemberNumber}});
      },
      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
//        console.log(`当前页: ${val}`);
        this.loadTableData();
      },
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        queryData:{
          dutyPerson: "",
          tmName: ""
        },
        serviceId:1,
        serviceList:[{
          serviceId: 1,
          serviceName: "团队名称",
        },{
          serviceId: 2,
          serviceName: "负责人",
        }],
        tableData: [],
        total:0,
        currentPage:1,
      }
    }
  }
</script>
<style>

  .input .btns{
    float:none!important;
    display:inline-block;
  }
  .el-input{
    width: 80%;
  }
  .input input{
    display: inline-block;
  }
  .el-pagination{
    margin-right:0!important;
    padding-right:0!important;
  }
  .el-select {
    display: block;
    position: relative;
  }
  .query{
    margin-right:30px;
  }
  .el-dialog .input-item{
    margin:10px 0 15px 0;
  }
</style>
